<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:0px 0xp 10px 0px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图{{this.$store.count}}</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>商品修改</el-breadcrumb-item> -->
    </el-breadcrumb>
    <el-row style="margin:5px 0;">
      <el-col :span="1">
        <el-button type="primary" @click="getaddlun">添加轮播图</el-button>
      </el-col>
    </el-row>
    <el-card>
      <!-- 轮播图列表 -->
      <el-table border style="width:100%" :data="tabdata">
        <el-table-column width="60" prop="id" label="ID">
        </el-table-column>
        <el-table-column width="120" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" width="80" height="50">
          </template>
        </el-table-column>
        <el-table-column width="120" prop="title" label="图片名称">
        </el-table-column>
        <el-table-column width="120" label="图片类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sidel=='0'">轮播图</el-tag>
            <el-tag v-else type="success">banel图</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="120" label="图片属性">
          <template slot-scope="scope">
            <div v-for="item in good" :key="item.id">
              <el-tag type="warning" v-if="scope.row.type==item.type">{{item.name}}</el-tag>
            </div>
          </template>
</el-table-column>
<el-table-column width="140" label="状态">
  <template slot-scope="scope">
  <div class="tag">
    <el-switch v-model="scope.row.detail" active-color="#13ce66" inactive-color="#ff4949" :active-value="0" :inactive-value="1">
      <!--  active-color="#13ce66"
  inactive-color="#ff4949"  -->
      <!-- @change="addstate(scope.row.id)" -->
      <!-- -->
      <!-- el-button -->
    </el-switch>
    <el-button type="text" v-if="scope.row.detail==0" @click="getdet(scope.row)">下架</el-button>
    <el-button type="text" v-else @click="getdow(scope.row)">上架</el-button>
  </div>
  <!-- <span>{{value=scope.row.detail==0?true:false}}</span> -->
</template>
</el-table-column>
    </el-table>
     <page @down="change" @up="changes" :list="tableData"></page>
    </el-card>
    <!-- 添加轮播图的对话框 -->
    <el-dialog title="添加轮播图" :visible.sync="dialogFormVisible" width="750px" >
  <el-form :model="form" width="50%" label-width="90px">
    <el-form-item label="活动名称" >
      <el-input v-model="form.title" autocomplete="off" style="width:350px;"></el-input>
    </el-form-item>
    <el-form-item label="活动选择" >
      <el-select v-model="form.sidel" placeholder="请选择图片类型">
        <el-option label="轮播图" value="0"></el-option>
        <el-option label="banle图" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="商品选择" v-if="this.form.sidel=='0'">
        <el-button type="primary" style="margin:0 5px;" @click="$router.push('/goodslist')">选择</el-button>
        <el-input style="width:270px;" v-model="goodsname"></el-input>
    </el-form-item>
    <el-form-item label="商品类型" v-if="this.form.sidel=='1'">
<el-select aria-placeholder="请选择商品类型" v-model="form.type">
  <el-option v-for="item in good" :key="item.id" :label="item.name" :value="item.type">

  </el-option>
</el-select>
    </el-form-item>
    <el-form-item label="轮播图片">
        <el-upload
            action="/img/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview1"
            :on-remove="handleRemove1"
            :on-success="handles2"
              :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl1" alt />
          </el-dialog>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click=" getadds">确 定</el-button>
  </div>
</el-dialog>
</div>
</template>
<script>
import axi from '../utils/text.js'
import page from '@/components/pagesize.vue'
export default {
  inject: ['reload'],
  name: 'Getlun',
  data() {
    return {
      value: '', // 开关状态
      user: '',
      dialogFormVisible: false,
      // goodsname:getStore()||null,
      goodsname: this.$store.state.count.goodsname,
      form: {
        title: '', // 图片对应商品名称
        img: '', // 轮播图图片
        goodsId: '', // 图片对应商品id
        sidel: '', // 轮播图还是banle
        type: ''
      },
      good: [],
      dialogVisible1: false,
      dialogImageUrl1: '',
      tabdata: [],
      tableData: []
    }
  },
  created() {
    this.getluns()
  },
  methods: {
    getluns() {
      //  console.log(this.$store.state.count,'有没有数据')
      axi.getlun().then(res => {
        // console.log(res)

        this.tableData = res.data.message
        this.tabdata = this.tableData.slice(0, 10)
      })
      axi.goods().then(res => {
        this.good = res.data.message
        //  console.log(this.good,'商品标签')
      })
    },
    // 添加轮播图事件
    getaddlun() {
      this.dialogFormVisible = true
    },
    handlePictureCardPreview1(file) {
      console.log(file)
      this.dialogVisible1 = true
      this.dialogImageUrl1 = file.url
    },
    // 详情图片移除事件
    handleRemove1() {
      this.dialogImageUrl1 = ''
      console.log('23')
    },
    // 详情图片上传
    handles2(file) {
      console.log(file.data)
      this.form.img = file.data
    },
    getadds() {
      this.dialogFormVisible = false
      axi.getadd(this.form).then(res => {
        if (res.data.err_code === 0) {
          this.$message.success('添加成功')
        } else {
          this.$message.warning('添加失败')
        }
        console.log(res, '添加失败了吗')
      })
      console.log(this.form)
      this.reload()
    },
    addstate(val) {
      console.log(val)
      const id = {
        id: val.id
      }
      if (val.detail === 0) {
        console.log(val.detail, '这里上上架', id)
        axi.getdetail(id).then(res => {
          //   console.log(res)
          // this.getluns()
        })
      } else if (val.detail === 1) {
        console.log('这里是下架', val.detail)
        this.$http.post('/detail/tion/get', { id: id }).then(res => {
          console.log(res)
          // this.getluns()
        })
      }
      //  console.log(val)
    },
    getdet(val) {
      const id = {
        id: val.id
      }
      axi.getdetail(id).then(res => {
        //   console.log(res)
        this.getluns()
      })
    },
    getdow(val) {
      const id = {
        id: val.id
      }

      this.$http.post('/detail/tion/get', { id: id }).then(res => {
        console.log(res)
        this.getluns()
      })
    },
    addsta(c) {
      console.log(c)
      //  let id={
      //   id:scope.row.id
      // }
      // axi.getdetail(id).then(res=>{
      //   console.log(res)
      //   this.getluns()
      // })
    },
    // 下一页分页事件
    change(num1) {
      this.tabdata = num1
      //  console.log(num1,si,'下一页')
      // this.tableData=this.tableData1.slice(num1,si)
    },
    changes(num1) {
      this.tabdata = num1
      // console.log(num1,si,'上一页')
      // this.tableData=this.tableData1.slice(num1,si)
    }
  },
  watch: {
    $route(to, form) {
      this.goodsname = this.$store.state.count.goodsname
      this.form.goodsId = this.$store.state.count.id
      //  console.log(to.path,'路由')
    },
    goodsname(val) {
      //  console.log(val,'变化的值')
    }
  },
  computed: {
    getStore() {
      return this.$store.state.count
    }
  },
  components: {
    page
  }
}
</script>
<style lang="less" scoped>
.el-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.el-form-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.tag {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
